<template>
  <view class="recharge-container">
    <view class="balance-box u-flex u-row-between u-m-b-40">
      <text class="label">当前钻石</text>
      <text class="balance">{{ diamond }}</text>
    </view>

    <view class="section-title">选择充值数量</view>
    <u-radio-group v-model="amount" class="amount-group" placement="row">
      <u-radio
          v-for="item in amountList"
          :key="item.value"
          :name="item.value"
          :custom-style="{marginRight: '32rpx'}"
      >
        <view class="amount-item">
          <text>{{ item.value }}钻石</text>
        </view>
      </u-radio>
    </u-radio-group>

    <view class="section-title u-m-t-40">选择支付方式</view>
    <view class="pay-grid-opt">
      <view
          v-for="item in payList"
          :key="item.value"
          :class="['pay-item-opt', payType === item.value ? 'active' : '']"
          @click="payType = item.value"
      >
        <u-icon :name="item.icon" size="70"></u-icon>
        <text class="pay-label">{{ item.label }}</text>
        <view v-if="payType === item.value" class="pay-check">
          <u-icon name="checkbox-mark" color="#ffb347" size="36"></u-icon>
        </view>
      </view>
    </view>

    <u-button
        type="primary"
        class="submit-btn"
        :disabled="!amount || !payType"
        @click="submit"
    >
      立即充值
    </u-button>
  </view>
</template>

<script>
import {mapState, mapActions} from 'vuex'
import {Pay} from '@/common/api.js'

export default {
  data() {
    return {
      amount: '',
      payType: 'wechat',
      amountList: [
        {value: 60},
        {value: 300},
        {value: 980},
        {value: 1980}
      ],
      payList: [
        {value: 'alipay', label: '支付宝', icon: 'zhifubao-circle-fill'},
        {value: 'wechat', label: '微信支付', icon: 'weixin-circle-fill'}
      ]
    }
  },
  onShow() {
    this.updateUserinfo()
  },
  mounted() {
    // 默认选中第一个
    if (this.amountList.length > 0) {
      this.amount = this.amountList[0].value
    }
  },
  computed: {
    ...mapState(['userinfo']),
    diamond() {
      return this.userinfo ? this.userinfo.gold : 0
    }
  },
  methods: {
    ...mapActions(['updateUserinfo']),
    submit() {
      if (!this.amount || !this.payType) {
        this.$u.toast('请选择充值数量和支付方式')
        return
      }
      Pay({type: this.payType, amount: this.amount, pay_type: 'GOLD'}).then(({data, msg}) => {
        if (data && data.url) {
          // #ifdef APP-PLUS
          plus.runtime.openURL(data.url)
          // #endif
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.recharge-container {
  padding: 40rpx 30rpx;
  background: #f7f8fa;
  min-height: 100vh;
}

.balance-box {
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx #e5e5e5;
  padding: 32rpx 24rpx;

  .label {
    color: #888;
    font-size: 28rpx;
  }

  .balance {
    color: #ffb347;
    font-size: 40rpx;
    font-weight: bold;
  }
}

.section-title {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 24rpx;
  font-weight: bold;
}

.amount-group {
  margin-bottom: 40rpx;
  display: flex;
  gap: 36rpx;
}

.amount-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 16rpx;
  padding: 18rpx 0;
  min-width: 120rpx;
  width: 140rpx;
  height: 60rpx;
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  border: 2rpx solid #f0f0f0;
  box-sizing: border-box;
  text-align: center;
}

.pay-grid-opt {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60rpx;
  gap: 32rpx;
}

.pay-item-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36rpx 0 24rpx 0;
  border-radius: 20rpx;
  background: #fff;
  border: 2rpx solid #f0f0f0;
  box-shadow: 0 2rpx 12rpx #f5f5f5;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;

  .pay-label {
    margin-top: 18rpx;
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
  }

  .u-icon {
    margin-bottom: 0;
  }

  &.active {
    border-color: #ffb347;
    box-shadow: 0 6rpx 24rpx #ffe082;
    background: #fffbe6;

    .pay-label {
      color: #ffb347;
    }
  }

  .pay-check {
    position: absolute;
    top: 18rpx;
    right: 18rpx;
  }
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  font-size: 34rpx;
  border-radius: 44rpx;
  font-weight: bold;
  background: linear-gradient(90deg, #ffb347, #ffcc33);
  color: #fff;
  box-shadow: 0 4rpx 16rpx #ffe082;
}
</style>